﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="all">
    <title></title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" th:href="@{/LoginStyle/css/bootstrap.min.css}">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="assets/css/main.css" th:href="@{/indexStyle/css/main.css}">
    <link rel="stylesheet" href="assets/css/blue.css" th:href="@{/indexStyle/css/blue.css}">
    <link rel="stylesheet" href="assets/css/owl.carousel.css" th:href="@{/indexStyle/css/owl.carousel.css}">
    <link rel="stylesheet" href="assets/css/owl.transitions.css" th:href="@{/indexStyle/css/owl.transitions.css}">
    <link rel="stylesheet" href="assets/css/animate.min.css" th:href="@{/indexStyle/css/animate.min.css}">
    <link rel="stylesheet" href="assets/css/rateit.css" th:href="@{/indexStyle/css/rateit.css}">
    <link rel="stylesheet" href="assets/css/bootstrap-select.min.css"
          th:href="@{/indexStyle/css/bootstrap-select.min.css}">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="assets/css/font-awesome.css" th:href="@{/indexStyle/css/font-awesome.css}">
    <style>
        .pro-des {
            padding-left: 20px;
        }

        .no-flow {
            height: 30px;
            overflow: hidden;
        }
    </style>
</head>

<body class="cnt-home">
<!-- ============================================== HEADER ============================================== -->
<header th:replace="~{user/fragment/IndexHeader:: indexHeader}"></header>

<!-- ============================================== HEADER : END ============================================== -->
<div class="breadcrumb">
    <div class="container">
        <div class="breadcrumb-inner">
            <ul class="list-inline list-unstyled">
                <li><a href="#">主页</a></li>
                <li><a href="#">详情</a></li>
            </ul>
        </div>
        <!-- /.breadcrumb-inner -->
    </div>
    <!-- /.container -->
</div>
<!-- /.breadcrumb -->
<div class="body-content outer-top-xs">
    <div class='container'>
        <div class='row single-product'>
            <div class='col-xs-12 col-sm-12 col-md-12 rht-col'>
                <div class="detail-block">
                    <div class="row">

                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 gallery-holder">
                            <div class="product-item-holder size-big single-product-gallery small-gallery">

                                <div id="owl-single-product">
                                    <div class="single-product-gallery-item" id="slide1">
                                        <a data-lightbox="image-1" data-title="Gallery"
                                           href="assets/images/products/p1.jpg" th:href="@{${product.goodsPicture1}}">
                                            <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                 data-echo="assets/images/products/p1.jpg"
                                                 th:attr="data-echo=${product.goodsPicture1}"/>
                                        </a>
                                    </div>
                                    <!-- /.single-product-gallery-item -->

                                    <div class="single-product-gallery-item" id="slide2">
                                        <a data-lightbox="image-1" data-title="Gallery"
                                           href="assets/images/products/p2.jpg" th:href="@{${product.goodsPicture2}}">
                                            <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                 data-echo="assets/images/products/p2.jpg"
                                                 th:attr="data-echo=${product.goodsPicture2}"/>
                                        </a>
                                    </div>
                                    <!-- /.single-product-gallery-item -->

                                    <div class="single-product-gallery-item" id="slide3">
                                        <a data-lightbox="image-1" data-title="Gallery"
                                           href="assets/images/products/p3.jpg" th:href="@{${product.goodsPicture3}}">
                                            <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                 data-echo="assets/images/products/p3.jpg"
                                                 th:attr="data-echo=${product.goodsPicture3}"/>
                                        </a>
                                    </div>
                                    <!-- /.single-product-gallery-item -->
                                    <div class="single-product-gallery-item" id="slide4">
                                        <a data-lightbox="image-1" data-title="Gallery"
                                           href="assets/images/products/p3.jpg" th:href="@{${product.goodsPicture4}}">
                                            <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                 data-echo="assets/images/products/p3.jpg"
                                                 th:attr="data-echo=${product.goodsPicture4}"/>
                                        </a>
                                    </div>

                                    <div class="single-product-gallery-item" id="slide5">
                                        <a data-lightbox="image-1" data-title="Gallery"
                                           href="assets/images/products/p3.jpg" th:href="@{${product.goodsPicture5}}">
                                            <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                 data-echo="assets/images/products/p3.jpg"
                                                 th:attr="data-echo=${product.goodsPicture5}"/>
                                        </a>
                                    </div>
                                </div>
                                <!-- /.single-product-slider -->


                                <div class="single-product-gallery-thumbs gallery-thumbs">

                                    <div id="owl-single-product-thumbnails">
                                        <div class="item">
                                            <a class="horizontal-thumb active" data-target="#owl-single-product"
                                               data-slide="1" href="#slide1">
                                                <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                     data-echo="assets/images/products/p1.jpg"
                                                     th:attr="data-echo=${product.goodsPicture1}"/>
                                            </a>
                                        </div>

                                        <div class="item">
                                            <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="2"
                                               href="#slide2">
                                                <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                     data-echo="assets/images/products/p2.jpg"
                                                     th:attr="data-echo=${product.goodsPicture2}">
                                            </a>
                                        </div>
                                        <div class="item">

                                            <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="3"
                                               href="#slide3">
                                                <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                     data-echo="assets/images/products/p3.jpg"
                                                     th:attr="data-echo=${product.goodsPicture3}"/>
                                            </a>
                                        </div>
                                        <div class="item">

                                            <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="4"
                                               href="#slide4">
                                                <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                     data-echo="assets/images/products/p4.jpg"
                                                     th:attr="data-echo=${product.goodsPicture4}"/>
                                            </a>
                                        </div>
                                        <div class="item">

                                            <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="5"
                                               href="#slide5">
                                                <img class="img-responsive" alt="" src="assets/images/blank.gif"
                                                     data-echo="assets/images/products/p5.jpg"
                                                     th:attr="data-echo=${product.goodsPicture5}"/>
                                            </a>
                                        </div>
                                    </div>
                                    <!-- /#owl-single-product-thumbnails -->


                                </div>
                                <!-- /.gallery-thumbs -->

                            </div>
                            <!-- /.single-product-gallery -->
                        </div>
                        <!-- /.gallery-holder -->
                        <div class='col-sm-12 col-md-8 col-lg-8 product-info-block'>
                            <div class="product-info">
                                <h1 class="name" th:text="${product.goodsName}">一种商品</h1>

                                <div>
                                    <span>评价:<b th:text="${product.evaluationCount}">0</b></span>
                                    <span class="pro-des">收藏:<b th:text="${product.collectionCount}">0</b></span>
                                </div>
                                <!-- /.rating-reviews -->

                                <div class="stock-container info-container m-t-10">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="pull-left">
                                                <div class="stock-box">
                                                    <span class="label">存货量 :</span>
                                                </div>
                                            </div>
                                            <div class="pull-left">
                                                <div class="stock-box">
                                                    <span class="value" th:text="${product.count}">1</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.row -->
                                </div>
                                <!-- /.stock-container -->

                                <div class="description-container m-t-20">
                                    描述:<p th:text="${product.goodsDescription}"> Lorem ipsum dolor sit amet, consectetur
                                    adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
                                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                    proident, sunt in culpa qui officia deserunt
                                    mollit anim id est laborum. </p>
                                </div>
                                <!-- /.description-container -->

                                <div class="price-container info-container m-t-30">
                                    <div class="row">


                                        <div class="col-sm-6 col-xs-6">
                                            <div class="price-box">
                                                <span class="price">$<b th:text="${product.price}">800.00</b></span>
                                                <span class="price-strike">$<b th:text="${product.oldPrice}">900.00</b></span>
                                            </div>
                                        </div>

                                        <div class="col-sm-6 col-xs-6">
                                            <div class="favorite-button m-t-5">
                                                <a class="btn btn-primary" data-toggle="tooltip" data-placement="right"
                                                   title="收藏" href="#">
                                                    <i class="fa fa-heart"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.row -->
                                </div>
                                <!-- /.price-container -->

                                <div class="quantity-container info-container">
                                    <div class="row">

                                        <div class="qty">
                                            <span class="label">数量 :</span>
                                        </div>
                                        <div class="qty-count">
                                            <div class="cart-quantity">
                                                <div class="quant-input">
                                                    <div class="arrows">
                                                        <div class="arrow plus gradient" id="add"><span class="ir"><i
                                                                class="icon fa fa-sort-asc"></i></span></div>
                                                        <div class="arrow minus gradient" id="sub"><span class="ir"><i
                                                                class="icon fa fa-sort-desc"></i></span></div>
                                                    </div>
                                                    <input id="count" type="text" value="1">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add-btn">
                                            <a href="#" class="btn btn-primary" id="addCart"><i
                                                    class="fa fa-shopping-cart inner-right-vs"></i>加入购物车</a>
                                        </div>
                                        <div class="add-btn">
                                            <a href="#" class="btn btn-primary" id="submit" th:href="@{/User/pay}">立即购买</a>
                                        </div>
                                    </div>
                                    <!-- /.row -->
                                </div>
                                <!-- /.quantity-container -->
                            </div>
                            <!-- /.product-info -->
                        </div>
                        <!-- /.col-sm-7 -->
                    </div>
                    <!-- /.row -->
                </div>


                <!-- /.product-tabs -->
            </div>
            <!-- /.col -->
            <div class="clearfix"></div>
        </div>
        <!-- /.row -->
        <!-- ============================================== BRANDS CAROUSEL ============================================== -->
        <div id="brands-carousel" class="logo-slider">

            <div class="logo-slider-inner">
                <div id="brand-slider" class="owl-carousel brand-slider custom-carousel owl-theme">
                    <div class="item m-t-15">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand1.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->

                    <div class="item m-t-10">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand2.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->

                    <div class="item">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand3.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->

                    <div class="item">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand4.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->

                    <div class="item">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand5.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->

                    <div class="item">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand6.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->

                    <div class="item">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand2.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->

                    <div class="item">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand4.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->

                    <div class="item">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand1.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->

                    <div class="item">
                        <a href="#" class="image">
                            <img data-echo="assets/images/brands/brand5.png" src="assets/images/blank.gif" alt="">
                        </a>
                    </div>
                    <!--/.item-->
                </div>
                <!-- /.owl-carousel #logo-slider -->
            </div>
            <!-- /.logo-slider-inner -->

        </div>
        <!-- /.logo-slider -->
        <!-- ============================================== BRANDS CAROUSEL : END ============================================== -->
    </div>
    <!-- /.container -->
</div>
<!-- /.body-content -->

<!-- ============================================================= FOOTER ============================================================= -->


<!-- ============================================================= FOOTER ============================================================= -->
<header th:replace="~{user/fragment/IndexFooter.html:: indexFooter}"></header>
<!-- ============================================================= FOOTER : END============================================================= -->

<script src="assets/js/jquery-1.11.1.min.js" th:src="@{/LoginStyle/js/jquery.min.js}"></script>
<script src="assets/js/bootstrap.min.js" th:src="@{/LoginStyle/js/bootstrap.min.js}"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"
        th:src="@{/indexStyle/js/bootstrap-hover-dropdown.min.js}"></script>
<script src="assets/js/owl.carousel.min.js" th:src="@{/indexStyle/js/owl.carousel.min.js}"></script>
<script src="assets/js/echo.min.js" th:src="@{/indexStyle/js/echo.min.js}"></script>
<script src="assets/js/jquery.easing-1.3.min.js" th:src="@{/indexStyle/js/jquery.easing-1.3.min.js}"></script>
<script src="assets/js/bootstrap-slider.min.js" th:src="@{/indexStyle/js/bootstrap-slider.min.js}"></script>
<script src="assets/js/jquery.rateit.min.js" th:src="@{/indexStyle/js/jquery.rateit.min.js}"></script>
<script src="assets/js/lightbox.min.js" th:src="@{/indexStyle/js/lightbox.min.js}"></script>
<script src="assets/js/bootstrap-select.min.js" th:src="@{/indexStyle/js/bootstrap-select.min.js}"></script>
<script src="assets/js/wow.min.js" th:src="@{/indexStyle/js/wow.min.js}"></script>
<script src="assets/js/scripts.js" th:src="@{/indexStyle/js/scripts.js}"></script>
<script th:src="@{/indexStyle/js/indexHeader.js}"></script>
<script th:inline="javascript">
    $(document).ready(function () {

        let MAX = [[${product.count}]];

        $("#add").click(function () {
            let value = $(this).parent().siblings("input").val();
            if (value < MAX)
                $(this).parent().siblings("input").val(++value);
        });

        $("#sub").click(function () {
            let value = $(this).parent().siblings("input").val();
            if (value > 1)
                $(this).parent().siblings("input").val(--value);
        });

        $("#addCart").click(function () {//加入购物车
            let id = [[${product.goodsId}]];
            let count = $("#count").val();
            $.post("/User/addCart/Data", {id, count}, function (data) {
                if (data == "yes" || data == "no") {
                    console.log("成功?" + data);
                    alert("加入购物车成功!");

                } else window.location.href = "/User/Login";
            });
        });

        $("#submit").click(function () {//直接购买
            let id = [[${product.goodsId}]];
            let count = $("#count").val();
            $.post("/User/addOrder/Data", {id, count}, function (data) {
                if (data == "yes" || data == "no") {
                    console.log("成功?" + data);
                    // if (data=="yes") window.location.href="/User/pay";
                } else window.location.href = "/User/Login";
            });
        });
    });
</script>
</body>

</html>